<div>
<div class="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
  <div class="sm:mx-auto sm:w-full sm:max-w-md">
    <img class="mx-auto h-12 w-auto" src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg" alt="Workflow">
    <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
      Sign in to your account
    </h2>
  </div>

  <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
      <div class="{{ 'animate-wiggle' if not valid and submitted }} bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
      <form meld:submit.prevent class="space-y-6" action="#" method="POST">
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700">
            {{ form.email.label }}
          </label>
          <div class="mt-1">
              <input meld:model.lazy="email" id="email" name="email" type="email" autocomplete="email" required 
               class="{{ 'focus:border-indigo-500' if not errors.email else 'border-red-500' }} appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:ring focus:ring-opacity-25 focus:border-indigo-500 transition duration-300 sm:text-sm ">
            <span class="text-red-600"> {{ errors.email| first }} </span>
          </div>
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700">
            Password
          </label>
          <div class="mt-1">
              <input 
               meld:model="password" 
               id="password"
               name="password"
               {% if not show_password %} type="password" {% endif %}
               autocomplete="current-password"
               required 
               class="{{ 'focus:border-indigo-500' if not errors.password else 'border-red-500' }} appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:ring focus:ring-opacity-25 focus:border-indigo-500 transition duration-300 sm:text-sm ">
            <span class="text-red-600"> {{ errors.password | first }} </span>
          </div>
        <div class="flex items-center space-x-2 pt-2 justify-end">
            <input type="checkbox" name="show_password" meld:model="show_password" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"/>
            <label class="ml-2 block text-sm text-gray-900">Show Password</label>
        </div>
        </div>

        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <input id="remember_me" name="remember_me" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
            <label for="remember_me" class="ml-2 block text-sm text-gray-900">
              Remember me
            </label>
          </div>

          <div class="text-sm">
            <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">
              Forgot your password?
            </a>
          </div>
        </div>
        <div class="py-2 space-y-4 text-center">
        {% if not valid %}
        <span class="text-red-600 mt-2">Invalid username or password</span>
        {% endif %}
        <button 
              type="submit"
              meld:click="save()"
              meld:loading.attr="disabled" 
              meld:loading.class="opacity-80 cursor-not-allowed"
              type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
            Sign in
        </button>
        </div>
        </div>
      </form>
    </div>
  </div>
</div>
